<template>
  <div>
    <TableSearch
      ref="tableSearch"
      :search-path="searchPath"
      :tableBtns="tableBtns"
      :formItemsInline="formItemsInline"
      :columns="columns"
      :tableData="tableData"
      :form="form"
      @handleTableData="handleTableData"
      @reset="reset"
    >
      <el-table-column label="角色状态" width="200" slot="switch">
        <template #default="{ row }">
          <span
            >{{ row.enable ? '启用' : '禁用' }}&nbsp;&nbsp;&nbsp;&nbsp;</span
          >
          <el-switch
            class="switch-dialog"
            v-model="row.enable"
            active-color="#57BC6B"
            inactive-color="#D1D1D1"
            @click.native="handleClick(row)"
            disabled
          >
          </el-switch>
        </template>
      </el-table-column>
    </TableSearch>
    <AddEditRole
      @refreshTable="refreshTable"
      :visible.sync="addRoleVisible"
      :dialog-type="dialogType"
      :role-attr="roleAttr"
    />
    <EditRolePermission
      @refreshTable="refreshTable"
      :visible.sync="editRolePermissionVisible"
      :role-attr="roleAttr"
    />
  </div>
</template>
<script>
import TableSearch from '@/components/TableSearch'
import AddEditRole from './components/AddEditRole'
import EditRolePermission from './components/EditRolePermission'
import { roleList, insertRole, updateRole, deleteRole } from '@/api/permission'
import formatter from '@/utils/format'
export default {
  components: { TableSearch, AddEditRole, EditRolePermission },
  data() {
    return {
      form: {
        showName: '',
      },
      searchPath: '/web/permission-management/role-management/角色权限',
      addRoleVisible: false,
      editRolePermissionVisible: false,
      dialogType: 'ADD',
      roleAttr: {},
      pageName: '角色权限',
      tableBtns: [
        {
          label: '添加角色',
          click: this.handleAdd,
          icon: 'el-icon-plus',
          resourceId: '/web/permission-management/role-management/角色权限',
        },
      ],
      formItemsInline: [
        {
          type: 'text',
          value: 'showName',
          placeholder: '角色名称',
          clearable: true,
          resourceId: '/web/permission-management/role-management/角色权限',
        },
      ],
      columns: [
        {
          label: '角色名称',
          prop: 'showName',
          resourceId: '/web/permission-management/role-management/角色权限',
        },
        {
          label: '角色说明',
          prop: 'explanation',
          resourceId: '/web/permission-management/role-management/角色权限',
        },
        {
          label: '用户类型',
          prop: 'userType',
          formatter,
          resourceId: '/web/permission-management/role-management/角色权限',
        },
        {
          slot: 'switch',
          resourceId: '/web/permission-management/role-management/角色权限',
        },
        {
          label: '操作',
          resourceId: '/web/permission-management/role-management/角色权限',
          buttons: [
            {
              label: '角色权限',
              class: 'table-button-green',
              size: 'small',
              click: this.handleUpate,
              // ifRender: (row) => {
              //   return row.updatable
              // },
            },
            {
              label: '复制',
              size: 'small',
              class: 'table-button-blue',
              click: this.handleCopy,
            },
            {
              label: '编辑',
              size: 'small',
              click: this.handleEdit,
              ifRender: (row) => {
                return row.updatable
              },
            },
            {
              label: '删除',
              size: 'small',
              click: this.handleDelete,
              ifRender: (row) => {
                return row.updatable
              },
            },
          ],
        },
      ],
      tableData: {},
    }
  },
  mounted() {},
  methods: {
    reset() {
      this.form = {
        showName: '',
      }
    },
    handleTableData(params) {
      roleList(params).then((res) => {
        this.tableData = {
          list: res.list,
          totalCount: res.totalAmount,
        }
      })
    },
    refreshTable() {
      this.$refs['tableSearch'].refreshTable()
    },
    handleAdd() {
      this.addRoleVisible = true
      this.dialogType = 'ADD'
    },
    handleClick(val) {
      this.$confirm(
        '是否' + (val.enable ? '禁用该角色?' : '启用该角色?'),
        '提示',
        {
          center: true,
          customClass: 'tip-dialog__wrapper',
        }
      )
        .then(() => {
          updateRole({ id: val.id, enable: !val.enable }).then(() => {
            this.$message({
              type: 'success',
              showClose: true,
              message: '操作成功',
            })
            this.refreshTable()
          })
        })
        .catch((err) => console.log(err))
    },
    handleEdit(val) {
      this.addRoleVisible = true
      this.roleAttr = val
      this.dialogType = 'EDIT'
    },
    handleUpate(val) {
      this.editRolePermissionVisible = true
      this.roleAttr = val
    },
    handleCopy(val) {
      let params = {
        explanation: val.explanation,
        showName: val.showName + '副本',
        userType: val.userType,
      }
      Object.assign(
        params,
        val.menuPaths && { menus: val.menuPaths },
        val.pagePaths && { pages: val.pagePaths },
        val.buttonPaths && { buttons: val.buttonPaths },
        val.columnPaths && { dataColumns: val.columnPaths },
        val.urlPaths && { urls: val.urlPaths }
      )
      insertRole(params).then(() => {
        this.$message({
          type: 'success',
          showClose: true,
          message: '复制成功',
        })
        this.refreshTable()
      })
    },
    handleDelete(val) {
      this.$confirm('是否要删除该角色？', '提示', {
        center: true,
        customClass: 'tip-dialog__wrapper',
      })
        .then(() => {
          deleteRole({ roleId: val.id }).then(() => {
            this.$message({
              showClose: true,
              message: '操作成功',
            })
            this.refreshTable()
          })
        })
        .catch((err) => console.log(err))
    },
  },
}
</script>
